/**
 * Rotary Table and animations by style 1
 */
.rotary-layer {
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
}

$rotary-table-style-1-layers: (
        layer-01: "01-out-base",
        layer-02: "02-line-dashes",
        layer-03: "03-line-mixed",
        layer-04: "04-center-line",
        layer-05: "05-center-holder",
        layer-06: "06-center-wave",
        layer-07: "07-center-mixed",
        layer-08: "08-center-lights"
);

.rotary-table.rotary-style-1-blue {
  @each $cls, $img in $rotary-table-style-1-layers {
    .#{$cls} {
      background-image: url("/media/rotary-table/" + "style-1-blue/" + $img + ".png");
    }
  }
}

.rotary-table.rotary-style-1-golden {
  @each $cls, $img in $rotary-table-style-1-layers {
    .#{$cls} {
      background-image: url("/media/rotary-table/" + "style-1-golden/" + $img + ".png");
    }
  }
}

/**
 * Animations
 */
// 2D
.rotary-table.rotary-style-1-2d {
  .layer-01 {
    @keyframes rotary-style-1-layer01 {
      from {
        transform: rotate(0)
      }
      to {
        transform: rotate(360deg)
      }
    }
    animation: rotary-style-1-layer01 18s ease-in-out 1s infinite alternate;
  }

  .layer-04 {
    @keyframes rotary-style-1-layer04 {
      from {
        transform: rotate(0)
      }
      to {
        transform: rotate(5deg)
      }
    }
    animation: rotary-style-1-layer04 500ms ease-in-out 1s infinite alternate;
  }

  .layer-05 {
    @keyframes rotary-style-1-layer05 {
      from {
        transform: rotate(0)
      }
      to {
        transform: rotate(60deg)
      }
    }
    animation: rotary-style-1-layer05 4s ease-in-out 1s infinite alternate;
  }

  .layer-06 {
    @keyframes rotary-style-1-layer06 {
      from {
        transform: rotate(0)
      }
      to {
        transform: rotate(360deg)
      }
    }
    animation: rotary-style-1-layer06 12s ease-in-out 1s infinite alternate;
  }
}

// 3D
.rotary-table.rotary-style-1-3d {
  @mixin transform($transform) {
    transform: $transform;
    -ms-transform: $transform; /* IE 9 */
    -moz-transform: $transform; /* Firefox */
    -webkit-transform: $transform; /* Safari and Chrome */
    -o-transform: $transform; /* Opera */

    transform-style: preserve-3d;
    -ms-transform-style: preserve-3d; /* IE 9 */
    -moz-transform-style: preserve-3d; /* Firefox */
    -webkit-transform-style: preserve-3d; /* Safari and Chrome */
    -o-transform-style: preserve-3d; /* Opera */
  }

  $angle: 75deg;
  .layer-01 {
    @keyframes rotary-style-1-3d-layer01 {
      from {
        @include transform(rotateX($angle) translateZ(0) rotateZ(0));
      }
      to {
        @include transform(rotateX($angle) translateZ(20px) rotateZ(180deg));
      }
    }
    animation: rotary-style-1-3d-layer01 5s infinite alternate;
  }

  .layer-02 {
    @include transform(rotateX($angle) translateZ(0));
  }

  .layer-03 {
    @keyframes rotary-style-1-3d-layer03 {
      from {
        @include transform(rotateX($angle) translateZ(0) rotateZ(0) scale(0.5));
      }
      to {
        @include transform(rotateX($angle) translateZ(20px) rotateZ(360deg) scale(1.5));
      }
    }
    animation: rotary-style-1-3d-layer03 5s infinite alternate;
  }

  .layer-04 {
    @keyframes rotary-style-1-3d-layer04 {
      from {
        @include transform(rotateX($angle) translateZ(30px) rotateZ(0));
      }
      to {
        @include transform(rotateX($angle) translateZ(50px) rotateZ(90deg));
      }
    }
    animation: rotary-style-1-3d-layer04 5s infinite alternate;
  }

  .layer-05 {
    @keyframes rotary-style-1-3d-layer05 {
      from {
        @include transform(rotateX($angle) translateZ(45px) rotateZ(0) scale(0.5));
      }
      to {
        @include transform(rotateX($angle) translateZ(65px) rotateZ(180deg) scale(0.5));
      }
    }
    animation: rotary-style-1-3d-layer05 5s infinite alternate;
  }

  .layer-06 {
    display: none;
    @keyframes rotary-style-1-3d-layer06 {
      from {
        @include transform(rotateX($angle) translateZ(15px) rotateZ(0));
      }
      to {
        @include transform(rotateX($angle) translateZ(35px) rotateZ(360deg));
      }
    }
    animation: rotary-style-1-3d-layer06 5s infinite alternate;
  }

  .layer-07 {
    @keyframes rotary-style-1-3d-layer07 {
      from {
        @include transform(rotateX($angle) translateZ(30px) rotateZ(360deg));
      }
      to {
        @include transform(rotateX($angle) translateZ(50px) rotateZ(0deg));
      }
    }
    animation: rotary-style-1-3d-layer07 5s infinite alternate;
  }

  .layer-08 {
    display: none;
  }

}